<template>
  <view class="page-container">
    <u-navbar
      titleColor="#fff"
      title="发布成功"
      backIconColor="#fff"
      :background="{ backgroundColor: isScroll ? '##000000' : '#000000' }"
      :border-bottom="false"
      :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
    >
    </u-navbar>

    <view class="flex flex-col gap-6 p-10">
      <view class="w-full h-[26.8125rem] bg-gray-50 rounded-md">
        <!-- 此处用cavs  画出来呢 -->
        <canvas canvas-id="canvas" class="w-full h-full"></canvas>
      </view>
      <view class="flex justify-between">
        <view class="flex flex-col gap-2 justify-center items-center" v-for="(i, k) in shareList" :key="k">
          <view class="w-[2.5rem] h-[2.5rem] bg-gray-50 rounded-full overflow-hidden">
            <image :src="`/static/${i.icon}.png`" class="size-full" mode="aspectFill" />
          </view>
          <view class="text-[.75rem] text-[#A3A3A5]">{{ i.name }}</view>
        </view>
      </view>
      <view class="flex justify-center items-center" @click="savePicture">
        <view class="w-[10.6875rem] h-[2.75rem] bg-[#00A4A6] rounded-[1.375rem] flex justify-center items-center">
          <view class="font-medium text-[1rem] text-[#FFFFFF]"> 保存图片</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        shareList: [
          {
            name: '微信好友',
            icon: 'dddr18'
          },
          {
            name: '微信朋友圈',
            icon: 'dddr50'
          },
          {
            name: 'QQ好友',
            icon: 'dddr55'
          },
          {
            name: 'QQ空间',
            icon: 'dddr31'
          }
        ],
        headerImg: 'https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749459934162_3MCEazw3.jpg',
        title: '用6',
        subTitle: '鲜嫩多汁的草莓融合香甜奶油',
        price: 36.89,
        abImg: 'https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749459934162_3MCEazw3.jpg',
        canvasW: 0,
        canvasH: 0,
        ctx: null,
        isShow: false,
        qrcode: 'https://basan.oss-cn-chengdu.aliyuncs.com/storage/products/20250609/1749459934162_3MCEazw3.jpg'
      }
    },
    onLoad() {},
    // async onReady() {
    //   let painter = new Painter(uni.createCanvasContext('canvas'))
    //   await painter.draw({
    //     type: 'text',
    //     color: '#f33',
    //     fontSize: 60, // = 60rpx
    //     content: 'Hello World' //绘制的文本
    //   })
    // },
    methods: {
      //保存图片到相册
      saveImage() {
        //判断用户授权
        uni.getSetting({
          success(res) {
            console.log('获取用户权限', res.authSetting)
            if (Object.keys(res.authSetting).length > 0) {
              //判断是否有相册权限
              if (res.authSetting['scope.writePhotosAlbum'] == undefined) {
                //打开设置权限
                uni.openSetting({
                  success(res) {
                    console.log('设置权限', res.authSetting)
                  }
                })
              } else {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                  //打开设置权限
                  uni.openSetting({
                    success(res) {
                      console.log('设置权限', res.authSetting)
                    }
                  })
                }
              }
            } else {
              return
            }
          }
        })
        var that = this
        uni.canvasToTempFilePath(
          {
            canvasId: 'my-canvas',
            quality: 1,
            complete: res => {
              console.log('保存到相册', res)
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  uni.showToast({
                    title: '已保存到相册',
                    icon: 'success',
                    duration: 2000
                  })
                  setTimeout(() => {
                    that.isShow = false
                  }, 2000)
                }
              })
            }
          },
          this
        )
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      savePicture() {
        vk.toast('保存成功')
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #000 !important;
  }

  /* #ifdef APP-PLUS */
  .uni-page-body {
    background-color: #000 !important;
  }

  /* #endif */
  .page-container {
    min-height: 100vh;
    background-color: #000;
  }
</style>
